<template>
  <div class="inventory-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>库存管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleReplenish">批量补货</el-button>
      </div>

      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="商品名称">
          <el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="queryParams.machineName" placeholder="请输入设备名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="库存状态">
          <el-select v-model="queryParams.status" placeholder="请选择库存状态" clearable>
            <el-option label="正常" value="normal"></el-option>
            <el-option label="预警" value="warning"></el-option>
            <el-option label="缺货" value="out"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="inventoryList" border style="width: 100%" v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" code>
        </el-table-column>
        <el-table-column prop="machineName" label="设备名称" code>
        </el-table-column>
        <el-table-column prop="currentStock" label="当前库存" width="120">
        </el-table-column>
        <el-table-column prop="warningStock" label="预警库存" width="120">
        </el-table-column>
        <el-table-column label="库存状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | statusTextFilter }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastReplenishTime" label="最后补货时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleSingleReplenish(scope.row)">补货</el-button>
            <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 补货对话框 -->
    <el-dialog title="补货操作" :visible.sync="replenishVisible" width="50%">
      <el-form :model="replenishForm" :rules="replenishRules" ref="replenishForm" label-width="100px">
        <el-form-item label="补货数量" prop="quantity">
          <el-input-number v-model="replenishForm.quantity" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="操作人" prop="operator">
          <el-input v-model="replenishForm.operator" placeholder="请输入操作人姓名"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="replenishForm.remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="replenishVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReplenish">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 库存详情对话框 -->
    <el-dialog title="库存详情" :visible.sync="detailVisible" width="60%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="商品名称">{{ currentInventory.goodsName }}</el-descriptions-item>
        <el-descriptions-item label="商品ID">{{ currentInventory.goodsId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ currentInventory.machineName }}</el-descriptions-item>
        <el-descriptions-item label="设备ID">{{ currentInventory.machineId }}</el-descriptions-item>
        <el-descriptions-item label="当前库存">{{ currentInventory.currentStock }}</el-descriptions-item>
        <el-descriptions-item label="预警库存">{{ currentInventory.warningStock }}</el-descriptions-item>
        <el-descriptions-item label="最大库存">{{ currentInventory.maxStock }}</el-descriptions-item>
        <el-descriptions-item label="库存状态">
          <el-tag :type="currentInventory.status | statusFilter">{{ currentInventory.status | statusTextFilter
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后补货时间">{{ currentInventory.lastReplenishTime }}</el-descriptions-item>
        <el-descriptions-item label="最后补货人">{{ currentInventory.lastReplenishOperator }}</el-descriptions-item>
      </el-descriptions>

      <div style="margin-top: 20px;">
        <el-table :data="replenishHistory" border style="width: 100%">
          <el-table-column prop="time" label="补货时间" width="180"></el-table-column>
          <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
          <el-table-column prop="quantity" label="补货数量" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInventoryList, replenishInventory, getInventoryDetail } from '@/api/inventory'

export default {
  name: 'Inventory',
  filters: {
    statusFilter (status) {
      const statusMap = {
        'normal': 'success',
        'warning': 'warning',
        'out': 'danger'
      }
      return statusMap[status] || ''
    },
    statusTextFilter (status) {
      const statusTextMap = {
        'normal': '正常',
        'warning': '预警',
        'out': '缺货'
      }
      return statusTextMap[status] || ''
    }
  },
  data () {
    return {
      queryParams: {
        goodsName: '',
        machineName: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      inventoryList: [],
      total: 0,
      loading: false,
      multipleSelection: [],
      replenishVisible: false,
      detailVisible: false,
      currentInventory: {},
      replenishHistory: [],
      replenishForm: {
        goodsId: '',
        machineId: '',
        quantity: 1,
        operator: '',
        remark: ''
      },
      replenishRules: {
        quantity: [
          { required: true, message: '请输入补货数量', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: '请输入操作人姓名', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      getInventoryList(this.queryParams).then(response => {
        this.inventoryList = response.data.list
        this.total = response.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery () {
      this.queryParams = {
        goodsName: '',
        machineName: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    handleSizeChange (val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleReplenish () {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一条记录')
        return
      }

      this.replenishForm = {
        goodsId: '',
        machineId: '',
        quantity: 1,
        operator: '',
        remark: ''
      }
      this.replenishVisible = true
    },
    handleSingleReplenish (row) {
      this.replenishForm = {
        goodsId: row.goodsId,
        machineId: row.machineId,
        quantity: 1,
        operator: '',
        remark: ''
      }
      this.replenishVisible = true
    },
    handleDetail (row) {
      this.currentInventory = Object.assign({}, row)
      getInventoryDetail(row.goodsId, row.machineId).then(response => {
        this.replenishHistory = response.data.replenishHistory
        this.detailVisible = true
      })
    },
    submitReplenish () {
      this.$refs.replenishForm.validate(valid => {
        if (valid) {
          const params = {
            goodsId: this.replenishForm.goodsId,
            machineId: this.replenishForm.machineId,
            quantity: this.replenishForm.quantity,
            operator: this.replenishForm.operator,
            remark: this.replenishForm.remark
          }

          if (this.multipleSelection.length > 0) {
            // 批量补货
            const goodsMachines = this.multipleSelection.map(item => ({
              goodsId: item.goodsId,
              machineId: item.machineId
            }))
            params.goodsMachines = goodsMachines
          }

          replenishInventory(params).then(response => {
            this.$message.success('补货成功')
            this.replenishVisible = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inventory-container {
  padding: 20px;

  .search-form {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style>